<template>
	<div class="base-Chart" :id="uuid"></div>
</template>
<script>
	import echarts from 'echarts'
	import uuidv1 from 'uuid/v1'

	export default {
		data() {
			return {
				myChart: {}, //生成的图表实例
				uuid: '', //唯一id
			}
		},
		props: {
			title: {
				type: String,
				default: ''
			},
			titleFontSize: {
				type: Number,
				default: 18
			},
			gridTop: {
				type: Number,
				default: 20
			},
			gridBottom: {
				type: Number,
				default: 40
			},
			gridLeft: {
				type: Number,
				default: 20
			},
			gridRight: {
				type: Number,
				default: 20
			},

			legendTop: {
				type: [Number,String],
				default: 'bottom'
			},
			legendBottom: {
				type: [Number,String],
				default: 'bottom'
			},
			legendLeft: {
				type: [Number,String],
				default: 'center'
			},
			legendRight: {
				type: [Number,String],
				default: 'center'
			},

			legendData: {
				type: Array,
				default() {
					return []
				}
			},
			legendIcon: {
				type: String,
				default: 'circle' //circle,rect,line,roundRect,triangle,diamond,pin,arrow,none
			},
			legendIconWidth: {
				type: Number,
				default: 10
			},
			legendIconHeight: {
				type: Number,
				default: 10
			},
			legendColor: {
				type: String,
				default: '#000'
			},
			legendFontSize: {
				type: Number,
				default: 14
			},

			xAxisType: {  //轴类型，'value'，'category'，'time'，'log'
				type: String,
				default: 'value'
			},
			xAxisMin: {  //'dataMin'最小值
				type: [Boolean,String,Date],
				default() {
					// return new Date(new Date(new Date().toLocaleDateString()).getTime())
					return null
				}
			},
			xAxisMax: { //'dataMax'最大值
				type: [Boolean,String,Date],
				default() {
					// return new Date(new Date(new Date().toLocaleDateString()).getTime()+24*60*60*1000-1)
					return null
				}
			},
			xAxisSplitNumber: { //坐标轴的分割段数，type为time时要设置
				type: Number,
				default: 12
			},
			xAxisSplitLineShow: { //是否显示x轴分隔线
				type: Boolean,
				default: false
			},
			xAxisAxisLineShow: { //是否显示x轴轴线
				type: Boolean,
				default: false
			},
			xAxisAxisLineColor: { //x轴轴线颜色
				type: String,
				default: '#fff'
			},
			xAxisAxisTickShow: {
				type: Boolean,
				default: false
			},
			xAxisAxisLabelShow: {
				type: Boolean,
				default: false
			},
			xAxisTextColor: { //x轴文字颜色
				type: String,
				default: '#000'
			},
			xAxisTexFontSize: { //x轴文字大小
				type: Number,
				default: 13
			},
			xAxisRotate: { //x轴文字旋转角度
				type: [Number,String],
				default: 0
			},

			yAxisType: {
				type: String,
				default: 'value', //轴类型，'value'，'category'，'time'，'log'
			},
			yAxisMax: {//'dataMax'最大值
				type: [Boolean,String,Number],
				default: null,
			},
			yAxisMin: {//'dataMin'最小值
				type: [Boolean,String,Number],
				default: 0,
			},
			yAxisSplitLineShow: {
				type: Boolean,
				default: true, 
			},
			yAxisLinecolor: {
				type: String,
				default: '#74739d',
			},
			yAxisLineType: {
				type: String,
				default: 'dashed'
			},
			yAxisAxisLineShow: {
				type: Boolean,
				default: false,
			},
			yAxisAxisLineColor: {
				type: String,
				default: '#fff',
			},
			yAxisAxisTickShow: {
				type: Boolean,
				default: false
			},
			yAxisTextFontSize: {
				type: [String,Number],
				default: 10,
			},
			yAxisTextColor: {
				type: String,
				default: '#000'
			},

			seriesData: {
				type: Array,
				default() {
					return []
				}
			},
			stack: {
				type: Boolean,
				default: false
			},
			symbolSize: { //散点大小
				type: Number,
				default: 5
			}
		},
		computed: {
			series() {
				let dataList = []
				if(this.stack) {
					for(let i=0,j=this.seriesData.length;i<j;i++) {
						dataList.push({
							name: this.seriesData[i].name,
							color: this.seriesData[i].color,
							type: 'scatter',
							symbolSize: this.symbolSize,
							stack: '总量',
							data: this.seriesData[i].value
						})
					}
					return dataList
				} else {
					for(let i=0,j=this.seriesData.length;i<j;i++) {
						dataList.push({
							name: this.seriesData[i].name,
							color: this.seriesData[i].color,
							type: 'scatter',
							symbolSize: this.symbolSize,
							data: this.seriesData[i].value
						})
					}
					return dataList
				}
			}
		},
		created() {
			this.uuid = uuidv1()
		},
		mounted() {
			this.initChart()
		},
		methods: {
			//刷新图表
			refreshChart() {
				setTimeout(() => {
					this.myChart.resize()
				},10)
			},
			//生成条形图
			initChart() {
				this.myChart = echarts.init(document.getElementById(this.uuid))
				this.setOption()
				if(this.fn) {
					this.myChart.on('click',this.fn)
				}
			},
			setOption() {
				let title = {
					title: {
			    		show: true,
			    		text: this.title,
			    		textStyle: {
			    			color: '#fff',
			    			fontSize: this.titleFontSize,
			    		},
			    		padding: [10,0,0,10]
			    	}
				}
				let tooltip = {
					tooltip : {
						padding: 10,
				        backgroundColor: '#222',
				        borderColor: '#777',
				        borderWidth: 1,
				        // formatter: function(params) {
				        // 	let res = ''
				        // 	for(let i=0,j=params.length;i<j;i++) {
				        // 		res += `<div style="margin: 5px 0;">发生时间：${params[i].data[0]}<br/>处警时长：${params[i].data[1]}小时</div>`
				        // 	}
				        // 	return  res
				        // },
				        trigger: 'axis',
			    		axisPointer: {
		    		      type: 'cross',
		    		      snap: true,
		    		      label: {
		    		      	show: false
		    		      },
		    		      crossStyle: {
		    		      	color: '#fff'
		    		      }
		    		    },
					}
				}
				let grid = {
					grid: {
						top: this.gridTop,
						bottom: this.gridBottom,
						left: this.gridLeft,
						right: this.gridRight,
						//grid是否包含刻度标签，更好计算
						containLabel: true,
					}
				}
				let legend = {
					//图例
					legend: {
					    top: this.legendTop,
						bottom: this.legendBottom,
						left: this.legendLeft,
						right: this.legendRight,
					    data: this.legendData,
					    icon: this.legendIcon,
					    itemWidth: this.legendIconWidth,
					    itemHeight: this.legendIconHeight,
					    textStyle: {
					    	color:this.legendColor,
					    	fontSize: this.legendFontSize
					    }
					}
				}
				let xAxis = {
					//横轴样式
				    xAxis: {
				    	type: this.xAxisType,  //轴类型，'value'，'category'，'time'，'log'
				    	min: this.xAxisMin, //'null'，'dataMin'最小值
                        max: this.xAxisMax, //'null'，'dataMax'最大值
                        splitNumber: this.xAxisSplitNumber, //5，坐标轴的分割段数，type为time时要设置
				    	//分隔线
				        splitLine: {
				            show: this.xAxisSplitLineShow, //'false'，是否显示x轴分隔线
				        },
				        //轴线
				        axisLine: {
				            show: this.xAxisAxisLineShow, //'true'，是否显示x轴轴线
				            lineStyle: {
				                color: this.xAxisAxisLineColor, //'#fff'，x轴轴线颜色
				               	width: 1,
				            }
				        },
				        //刻度线
				        axisTick: {
				        	show: this.xAxisAxisTickShow,
				        },
				        //文字
				        axisLabel: {
				        	show: this.xAxisAxisLabelShow,
				        	textStyle: {
				        		color: this.xAxisTextColor, //'#fff'，x轴文字颜色
				        		fontSize: this.xAxisTexFontSize, //14，x轴文字大小
				        	},
							rotate: this.xAxisRotate, //0，x轴文字旋转角度
							formatter: function (params) {
								let t_date = new Date(params)
								let hours = t_date.getHours()<10 ? '0' + t_date.getHours(): t_date.getHours()
								return hours + ':00'
							}
				        }
				    }
				}
				let yAxis = {
					//纵轴样式
				    yAxis: {
				    	type: this.yAxisType,
				    	max: this.yAxisMax,
				    	min: this.yAxisMin,
				    	//分隔线
				        splitLine: {
				            show: this.yAxisSplitLineShow,
				            lineStyle: {
				                color: this.yAxisLinecolor,
				                type: this.yAxisLineType
				            }
				        },
				        //轴线
				        axisLine: {
				            show: this.yAxisAxisLineShow,
				            lineStyle: {
				                color: this.yAxisAxisLineColor,
				            }
				        },
				        //刻度线
				        axisTick: {
				        	show: this.yAxisAxisTickShow,
				        },
				        //文字
				        axisLabel: {
				        	textStyle: {
				        		color: this.yAxisTextColor, //'#fff'，x轴文字颜色
				        		fontSize: this.yAxisTextFontSize,
				        	}
				        }
				    },
				}
				let series = {
					series: this.series
				}

				let option = {}
				Object.assign(option,title,tooltip,legend,grid,xAxis,yAxis,series)
				
				this.myChart.setOption(option,true)
			},
			//清除实例
			disposeChart() {
				this.myChart.dispose()
			}
		},
		watch: {
			gridTop: {
				deep: true,
				handler(newValue) {
					this.initChart()
				}
			},
			gridBottom: {
				deep: true,
				handler(newValue) {
					this.initChart()
				}
			},
			gridLeft: {
				deep: true,
				handler(newValue) {
					this.initChart()
				}
			},
			gridRight: {
				deep: true,
				handler(newValue) {
					this.initChart()
				}
			},
			legendTop: {
				deep: true,
				handler(newValue) {
					this.initChart()
				}
			},
			legendBottom: {
				deep: true,
				handler(newValue) {
					this.initChart()
				}
			},
			legendLeft: {
				deep: true,
				handler(newValue) {
					this.initChart()
				}
			},
			legendRight: {
				deep: true,
				handler(newValue) {
					this.initChart()
				}
			},
			legendData: {
				deep: true,
				handler(newValue) {
					this.initChart()
				}
			},
			legendIcon: {
				deep: true,
				handler(newValue) {
					this.initChart()
				}
			},
			legendIconWidth: {
				deep: true,
				handler(newValue) {
					this.initChart()
				}
			},
			legendIconHeight: {
				deep: true,
				handler(newValue) {
					this.initChart()
				}
			},
			legendColor: {
				deep: true,
				handler(newValue) {
					this.initChart()
				}
			},
			legendFontSize: {
				deep: true,
				handler(newValue) {
					this.initChart()
				}
			},
			xAxisType: {
				deep: true,
				handler(newValue) {
					this.initChart()
				}
			},
			xAxisMin: {
				deep: true,
				handler(newValue) {
					this.initChart()
				}
			},
			xAxisMax: {
				deep: true,
				handler(newValue) {
					this.initChart()
				}
			},
			xAxisSplitNumber: {
				deep: true,
				handler(newValue) {
					this.initChart()
				}
			},
			xAxisSplitLineShow: {
				deep: true,
				handler(newValue) {
					this.initChart()
				}
			},
			xAxisAxisLineShow: {
				deep: true,
				handler(newValue) {
					this.initChart()
				}
			},
			xAxisAxisLineColor: {
				deep: true,
				handler(newValue) {
					this.initChart()
				}
			},
			xAxisTextColor: {
				deep: true,
				handler(newValue) {
					this.initChart()
				}
			},
			xAxisTexFontSize: {
				deep: true,
				handler(newValue) {
					this.initChart()
				}
			},
			xAxisRotate: {
				deep: true,
				handler(newValue) {
					this.initChart()
				}
			},
			yAxisType: {
				deep: true,
				handler(newValue) {
					this.initChart()
				}
			},
			yAxisMax: {
				deep: true,
				handler(newValue) {
					this.initChart()
				}
			},
			yAxisMin: {
				deep: true,
				handler(newValue) {
					this.initChart()
				}
			},
			yAxisSplitLineShow: {
				deep: true,
				handler(newValue) {
					this.initChart()
				}
			},
			yAxisLinecolor: {
				deep: true,
				handler(newValue) {
					this.initChart()
				}
			},
			yAxisLineType: {
				deep: true,
				handler(newValue) {
					this.initChart()
				}
			},
			yAxisAxisLineShow: {
				deep: true,
				handler(newValue) {
					this.initChart()
				}
			},
			yAxisAxisLineColor: {
				deep: true,
				handler(newValue) {
					this.initChart()
				}
			},
			yAxisAxisTickShow: {
				deep: true,
				handler(newValue) {
					this.initChart()
				}
			},
			yAxisTextFontSize: {
				deep: true,
				handler(newValue) {
					this.initChart()
				}
			},
			stack: {
				deep: true,
				handler(newValue) {
					this.initChart()
				}
			},
			symbolSize: {
				deep: true,
				handler(newValue) {
					this.initChart()
				}
			},
			series: {
				deep: true,
				handler(newValue) {
					this.initChart()
				}
			},
		},
	}
</script>
<style>
	.base-Chart {
		width: 100%;
		height: 100%;
	}
</style>